<template>
  <div class="edit-container">
    <van-nav-bar
      title="编辑资料"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="name" @click="shoeEdit"/>
      <van-cell title="生日" is-link value="2012-12-12" />
    </van-cell-group>
    <!-- 修改名称 -->
    <van-dialog v-model="show" title="修改名称" show-cancel-button>
      <van-field v-model.trim="name" placeholder="请输入用户名" input-align="center" maxlength="7" />
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'张三',
      show: false,
    };
  },
  methods: {
    shoeEdit() {
      this.show = true
    }
  }
};
</script>

<style lang="less" scoped>
.edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>